<template>
  <el-card class="dashboard">
    <div class="order">
      <el-card class="order-item">
        <template #header>
          <div class="card-header">
            <span>今日访问量</span>
          </div>
        </template>
        <div class="item">1888</div>
      </el-card>
      <el-card class="order-item">
        <template #header>
          <div class="card-header">
            <span>今日浏览量</span>
          </div>
        </template>
        <div class="item">36271</div>
      </el-card>
      <el-card class="order-item">
        <template #header>
          <div class="card-header">
            <span>题库总数量</span>
          </div>
        </template>
        <div class="item">20%</div>
      </el-card>
    </div>
    <div>
      <Bar :barArr="barArr" />
      <!-- <Pie /> -->
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import Bar from "../components/Bar.vue";
// import Pie from "../components/Pie.vue";

import { ref, onMounted, onUnmounted, getCurrentInstance } from "vue";
// 相当于在setup获取当前的this -- proxy就是当前的实例对象
const { proxy } = getCurrentInstance();

let barArr = ref([20, 500, 130, 180, 70, 130, 80, 120, 200, 350, 180, 270]);

onMounted(() => {
  //   if (window.echarts) {
  // 基于准备好的dom，初始化echarts实例
  // myChart = window.echarts.init(document.getElementById("zoom"));
  // myChartZoom.value = proxy["$echarts"].init(document.getElementById("zoom"));
  // 指定图表的配置项和数据
  // const zoomOption = {
  //   title: {
  //     text: "系统折线图",
  //   },
  //   tooltip: {
  //     trigger: "axis",
  //     axisPointer: {
  //       type: "cross",
  //       label: {
  //         backgroundColor: "#6a7985",
  //       },
  //     },
  //   },
  //   legend: {
  //     data: ["新增注册", "付费用户", "活跃用户", "订单数", "当日总收入"],
  //   },
  //   toolbox: {
  //     feature: {
  //       saveAsImage: {},
  //     },
  //   },
  //   grid: {
  //     left: "3%",
  //     right: "4%",
  //     bottom: "3%",
  //     containLabel: true,
  //   },
  //   xAxis: [
  //     {
  //       type: "category",
  //       boundaryGap: false,
  //       data: [
  //         "2021-03-11",
  //         "2021-03-12",
  //         "2021-03-13",
  //         "2021-03-14",
  //         "2021-03-15",
  //         "2021-03-16",
  //         "2021-03-17",
  //       ],
  //     },
  //   ],
  //   yAxis: [
  //     {
  //       type: "value",
  //     },
  //   ],
  //   series: [
  //     {
  //       name: "新增注册",
  //       type: "line",
  //       stack: "总量",
  //       areaStyle: {},
  //       emphasis: {
  //         focus: "series",
  //       },
  //       data: [120, 132, 101, 134, 90, 230, 210],
  //     },
  //     {
  //       name: "付费用户",
  //       type: "line",
  //       stack: "总量",
  //       areaStyle: {},
  //       emphasis: {
  //         focus: "series",
  //       },
  //       data: [220, 182, 191, 234, 290, 330, 310],
  //     },
  //     {
  //       name: "活跃用户",
  //       type: "line",
  //       stack: "总量",
  //       areaStyle: {},
  //       emphasis: {
  //         focus: "series",
  //       },
  //       data: [150, 232, 201, 154, 190, 330, 410],
  //     },
  //     {
  //       name: "订单数",
  //       type: "line",
  //       stack: "总量",
  //       areaStyle: {},
  //       emphasis: {
  //         focus: "series",
  //       },
  //       data: [320, 332, 301, 334, 390, 330, 320],
  //     },
  //     {
  //       name: "当日总收入",
  //       type: "line",
  //       stack: "总量",
  //       label: {
  //         show: true,
  //         position: "top",
  //       },
  //       areaStyle: {},
  //       emphasis: {
  //         focus: "series",
  //       },
  //       data: [820, 932, 901, 934, 1290, 1330, 1320],
  //     },
  //   ],
  // };
  // 使用刚指定的配置项和数据显示图表。
  // myChartZoom.value.setOption(zoomOption);
  //   }
  // 初始化
  // myChartColumnar.value = proxy["$echarts"].init(
  //   document.getElementById("columnar")
  // );
  // const columnarOption = {
  //   xAxis: {
  //     type: "category",
  //     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  //   },
  //   yAxis: {
  //     type: "value",
  //   },
  //   series: [
  //     {
  //       data: [120, 200, 150, 80, 70, 110, 130],
  //       type: "bar",
  //       showBackground: true,
  //       backgroundStyle: {
  //         color: "rgba(180, 180, 180, 0.2)",
  //       },
  //     },
  //   ],
  // };
  // 使用刚指定的配置项和数据显示图表。
  // myChartColumnar.value.setOption(columnarOption);
});
onUnmounted(() => {
  // myChartZoom.value.dispose();
  // myChartColumnar.value.dispose();
});
</script>

<style scoped>
.dashboard .order {
  display: flex;
  margin-bottom: 50px;
}
.dashboard .order .order-item {
  flex: 1;
  margin-right: 20px;
}
.dashboard .order .order-item:last-child {
  margin-right: 0;
}
#zoom,
#columnar {
  min-height: 300px;
}
.echarts {
  display: flex;
  justify-content: space-between;
}
</style>
